<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>initiate_vote</title>
<link rel="stylesheet" href="css/bootstrap.css" />
<link href="css/bootstrap-datetimepicker.min.css" rel="stylesheet"
	media="screen">
<script src="js/jquery-3.1.0.min.js"></script>
<script src="js/bootstrap.js"></script>
<script type="text/javascript" src="js/bootstrap-datetimepicker.js"
	charset="UTF-8"></script>
<script type="text/javascript"
	src="js/bootstrap-datetimepicker.zh-CN.js" charset="UTF-8"></script>
<script type="text/javascript" src="js/jquery.form.js" charset="UTF-8"></script>
<script>
	//定义一个全局变量,用于记录选项个数
	window.option_account = 3;
	$(function() {
		//用户向后台请求查询，判断是否存在相同的账号
		var options = {
			beforeSubmit : showRequest, // pre-submit callback
			success : showResponse, // post-submit callback
			url : "../InitiateVoteServlet", // override for form's 'action' attribute
			type : "post", // 'get' or 'post', override for form's 'method' attribute
			dataType : "json",// 'xml', 'script', or 'json' (expected server response type)
			clearForm : true
		};
		// bind form using 'ajaxForm'
		// pre-submit callback
		function showRequest(formData, jqForm, options) {
			debugger;
			var subject = formData[0].value;
			if(subject == ""){
				alert("主题不能为空");
				return false;
			}
			return true;
		}
		// post-submit callback
		function showResponse(responseText, statusText, xhr, $form) {
			if(responseText.message == "similarSubject"){
				alert("你已经发起了存于进行中的相同主题的投票，请重新输入！");
			}else if(responseText.message == "success"){
				alert("成功发起该项投票");
			}else if(responseText.message == "fail"){
				alert("出现未知错误!");
			}
		}

		$('#myForm').ajaxForm(options);

		//设置日期插件格式
		$('.form_datetime').datetimepicker({
			language : 'zh-CN',
			weekStart : 1,
			startView : 4,
			minView : 2,
			todayBtn : 1,
			autoclose : 1,
			todayHighlight : 1,
			keyboardNavigation : 1,
			forceParse : 0,
		});
		
	//实现添加选项功能
		$("#add-option-btn")
				.click(
						function() {
							//创建一个新的选项节点
							var option = $(" <input type='text' class = 'myform-control' name = 'option'/><br>");
							//获取下一个选项数
							var placeVal = "选项" + window.option_account;
							//选项数加1
							window.option_account++;
							//给新插入的选项节点添加placeholder属性
							option.attr("placeholder", placeVal);
							//添加选项节点
							option.appendTo("#optionDiv");
						});
		//实现移除选项的功能
		$("#remove-option-btn").click(function() {
			$("#optionDiv br:last").remove();
			$("#optionDiv input:last").remove();
			window.option_account--;
		});
	});
</script>
<style>
.myform-control {
	display: block;
	width: 20%;
	height: 34px;
	padding: 6px 12px;
	font-size: 14px;
	line-height: 1.42857143;
	color: #555;
	background-color: #fff;
	background-image: none;
	border: 1px solid #ccc;
	border-radius: 4px;
}
</style>
</head>
<body>
<div style="margin-bottom: 20px;padding-top:6px;padding-left:8px;height:30px;background-color: #f2f2f2;">
    <span style="color: #2f6da7">投票管理</span> / 发起投票
</div>
<div class="glyphicon-fullscreen" style="margin: 0px" >
    <form role="form" id = "myForm">
        <div class="form-group">
            <label
                    for="subject"
                    style="padding-left: 9px;padding-right: 9px;padding-top:3px;padding-bottom:3px;border-radius:3px;
                    background-color:red;color: white">
                <strong style="color: white">主题</strong>
            </label>
            <input type="text" class="form-control" id="subject" name = "subject" />
        </div>
        <div class="form-group">
            <label
                    class="control-label"
                    for = "start_time"
                    style="padding:3px;padding-left: 9px;padding-right: 9px;border-radius: 3px;background-color:#5BC1E0"
            ><strong style="color: white">开始时间</strong></label>
            <div class="controls input-append date form_datetime" data-date="2016-09-16" data-date-format="yyyy-mm-dd" data-link-field="dtp_input1">
                <input type="text"  class="form-control" value="2016-09-21" id = "start_time" name = "start_time" readonly>
                <span class="add-on"><i class="icon-remove"></i></span>
                <span class="add-on"><i class="icon-th"></i></span>
            </div>
        </div>
        <div class="form-group">
            <label
                    class="control-label"
                    for = "end_time"
                    style="padding:3px;padding-left: 9px;padding-right: 9px;border-radius: 3px;background-color:#5BC1E0"
            ><strong style="color: white">结束时间</strong></label>
            <div class="controls input-append date form_datetime" data-date="2016-09-16" data-date-format="yyyy-mm-dd" data-link-field="dtp_input1">
                <input type="text"  class="form-control" value="2016-09-21" id = "end_time" name = "end_time" readonly>
                <span class="add-on"><i class="icon-remove"></i></span>
                <span class="add-on"><i class="icon-th"></i></span>
            </div>
        </div>
        <div class="form-group">
            <label
                    style="padding:3px;padding-left: 9px;padding-right: 9px;border-radius: 3px;background-color:#5BC1E0"
            >
                <strong style="color:white">类型</strong>
            </label><br>
            <input  type="radio" name = "vote_type" value="0" checked = "checked" />单选
            <input  type="radio" name = "vote_type" value="1" />多选
        </div>
        <div class="form-group" id = "optionDiv">
            <label
                    style="padding:3px;padding-left: 9px;padding-right: 9px;border-radius: 3px;background-color:#5DB95D"
            >
                <strong style="color:white">选项</strong>
            </label><br>
           <input type="text" class = "myform-control" placeholder="选项1" name = "option"/><br>
           <input type="text" class = "myform-control" placeholder="选项2" name = "option"/><br>
        </div>
        <div class="form-group">
            <input class="btn btn-default" type="button" value="+ 添加选项" style="color: white;background-color: #5BC1E0" id = "add-option-btn">
            <input class="btn btn-default" type="button" value="- 删除选项" style="color: white;background-color: #5BC1E0" id = "remove-option-btn">
        </div>
        <button  type="submit" class="btn btn-default" style="border-radius: 3px;background-color: #337BB7">
            <strong style="color: white;">发起投票</strong>
        </button>
    </form>
</div>
</body>
</html>